<template>
  <div class="todo-section">
    <div class="section-title">待办事项</div>
    <div class="todo-item" v-for="(item, index) in todoItems" :key="index">
      <div class="todo-header">
        <div class="todo-title">{{ item.title }}</div>
        <div class="todo-status" :class="'status-' + item.status">{{ getStatusText(item.status) }}</div>
      </div>
      <div class="todo-content" v-for="(content, cIndex) in item.contents" :key="cIndex">
        <div class="todo-label">{{ content.label }}：</div>
        <div class="todo-value">{{ content.value }}</div>
      </div>
      <div class="todo-actions">
        <button v-for="(action, aIndex) in item.actions" :key="aIndex" 
                class="todo-btn" :class="action.type">
          {{ action.text }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TodoSection',
  data() {
    return {
      todoItems: [
        {
          title: '资产维修申请',
          status: 'pending',
          contents: [
            { label: '申请人', value: '李四' },
            { label: '资产名称', value: 'Dell笔记本电脑' },
            { label: '申请日期', value: '2024-05-10' }
          ],
          actions: [
            { text: '拒绝', type: 'btn-secondary' },
            { text: '同意', type: 'btn-primary' }
          ]
        },
        {
          title: '差旅费报销',
          status: 'pending',
          contents: [
            { label: '出差地点', value: '上海' },
            { label: '出差时间', value: '2024-05-05 至 2024-05-08' }
          ],
          actions: [
            { text: '继续填写', type: 'btn-primary' }
          ]
        }
      ]
    }
  },
  methods: {
    getStatusText(status) {
      const statusMap = {
        'pending': '待审批',
        'approved': '已同意',
        'rejected': '已拒绝'
      }
      return statusMap[status] || status
    }
  }
}
</script>

<style scoped>
.todo-section {
  margin: 16px;
}

.todo-item {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.todo-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.todo-title {
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.todo-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  color: #fff;
}

.todo-content {
  display: flex;
  margin-bottom: 10px;
}

.todo-label {
  min-width: 70px;
  font-size: 13px;
  color: #666;
}

.todo-value {
  flex: 1;
  font-size: 13px;
  color: #333;
}

.todo-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.todo-btn {
  padding: 6px 12px;
  border-radius: 4px;
  margin-left: 8px;
  font-size: 13px;
}
</style> 